<ng-container *ngFor="let item of listData">
  <div class="item-bg">
    <!-- header -->
    <div class="item-header" *ngIf="item.headRowLeft">
      <img class="item-avatar" src="{{item.headRowLeft.icon?.iconName}}" alt="" onerror="onerror=null;src='assets/img/headtrait.png'">
      <p class="header-content">{{item.headRowLeft.firstText?.label}}</p>
      <span class="header-status" [ngStyle]="item.headRowRight.firstText?.cssStyle | styleFilter">{{item.headRowRight.firstText?.label}}</span>
    </div>


    <div class="item-content-bg">
      <!-- Left -->
      <div class="item-content-left">
        <p class="item-from-tag">推</p>
        <hr class="item-line-dashed" />
        <p class="item-to-tag">给</p>

      </div>

      <div style="display: inline-block;">
        <div class="item-content-right">
          <!-- From -->
          <div class="item-content-from">
            <p class="item-content-title">
              <span class="title" >{{item.contentRow?.fromDiv?.title}}</span>
              <span class="phone" appDebounceClick (debounceClick)="call(item.contentRow?.fromDiv?.phone.label)">{{item.contentRow?.fromDiv?.phone.label}}</span>
               <img *ngIf="item.contentRow?.fromDiv?.phone.icon" style="width: 0.88rem; height: 0.88rem; object-fit: contain; display: inline-block; margin-left: 0.31rem;" src="assets/icon/{{item.contentRow?.fromDiv?.phone.icon}}" appDebounceClick (debounceClick)="call(item.contentRow?.fromDiv?.phone.label)" alt="">
            </p>
            <p class="item-content-sub-title">
              <span class="title-status" [ngStyle]="item.contentRow?.fromDiv?.secondRowLeft?.firstText?.cssStyle | styleFilter">{{item.contentRow?.fromDiv?.secondRowLeft?.firstText?.label}}</span>
              <span class="title" appDebounceClick (debounceClick)="detailPage(item.contentRow?.fromDiv?.secondRowLeft?.secondText?.link)">{{item.contentRow?.fromDiv?.secondRowLeft?.secondText?.label}}</span>
              <img *ngIf="item.contentRow?.fromDiv?.secondRowLeft?.icon" style="width: 0.38rem; height: 0.69rem; object-fit: contain; display: inline-block; margin-left: 0.31rem;" src="assets/icon/{{item.contentRow.fromDiv.secondRowLeft.icon}}"  alt="" appDebounceClick (debounceClick)="call(item.contentRow?.fromDiv?.phone?.label)">
            </p>
            <p class="item-content-detail">{{item.contentRow?.fromDiv?.thirdRowLeft?.firstText?.label}}</p>
          </div>
          <!-- TO -->
          <div class="item-content-to">
            <p class="item-content-title">
              <span class="title" appDebounceClick (debounceClick)="detailPage(item.contentRow?.toDiv?.title)">{{item.contentRow?.toDiv?.title}}</span>
              <span class="phone" appDebounceClick (debounceClick)="call(item.contentRow?.toDiv?.phone?.label)">{{item.contentRow.toDiv.phone.label}}</span>
              <img *ngIf="item.contentRow?.toDiv?.secondRowLeft?.icon" style="width: 0.88rem; height: 0.88rem; object-fit: contain; display: inline-block; margin-left: 0.31rem;" src="assets/icon/{{item.contentRow?.toDiv?.phone.icon}}" alt="" appDebounceClick (debounceClick)="call(item.contentRow?.toDiv?.phone?.label)">
            </p>

            <p class="item-content-sub-title">
              <span class="title-status" [ngStyle]="item.contentRow?.toDiv?.secondRowLeft?.firstText?.cssStyle | styleFilter">{{item.contentRow?.toDiv?.secondRowLeft?.firstText?.label}}</span>
              <span class="title" appDebounceClick (debounceClick)="detailPage(item.contentRow?.toDiv?.secondRowLeft?.secondText?.link)">{{item.contentRow?.toDiv?.secondRowLeft?.secondText?.label}}</span>
              <img *ngIf="item.contentRow?.toDiv?.secondRowLeft?.icon" style="width: 0.38rem; height: 0.69rem; object-fit: contain; display: inline-block; margin-left: 0.31rem;" src="assets/icon/{{item.contentRow.toDiv.secondRowLeft.icon}}" alt="">
            </p>
            <p class="item-content-detail">{{item.contentRow?.toDiv?.thirdRowLeft?.firstText?.label}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- line -->
    <hr *ngIf="item.inlineBlock" class="line">

    <div class="record-bg">
      <span [ngStyle]="item.fourthRowLeft?.firstText?.cssStyle | styleFilter" class="record-status">{{item.fourthRowLeft?.firstText?.label}}</span>
      <div class="action-icon-bg" *ngIf="item.fourthRowRight?.iconList && item.fourthRowRight?.iconList.length > 0">
        <ng-container *ngFor="let iconItem of item.fourthRowRight.iconList, let i = index">
          <!-- 最多4个 -->
          <ng-container *ngIf="item.fourthRowRight.iconList.length <= 4">
            <img class="icon"  appDebounceClick (debounceClick)="iconClick(iconItem)" src="assets/icon/{{iconItem.iconName}}" alt="">

          </ng-container>
          <!-- 多于4个 -->
          <ng-container *ngIf="item.fourthRowRight.iconList.length > 4" >
            <!-- 前3 -->
            <ng-container *ngIf="i < 3">
              <img class="icon"  appDebounceClick (debounceClick)="iconClick(iconItem)" src="assets/icon/{{iconItem.iconName}}" alt="">
  
            </ng-container>
            <!-- more -->
            <ng-container *ngIf="i === 3">
              <img class="icon"  appDebounceClick (debounceClick)="openIcon(item.fourthRowRight.iconList)" src="assets/img/List operation_icon_more@3x.png" alt="">
            </ng-container>
            
          </ng-container>

        </ng-container>

      </div>

    </div>
    <!-- remakr -->
    <img *ngIf="item.remark?.length > 0" style="width:0.56rem;height:0.38rem;margin-left:1.25rem;" src="assets/icon/detail_icon_triangle@3x.png">
    <p *ngIf="item.remark?.length > 0" class="remark">{{item.remark}}</p>

  </div>

</ng-container>

<ion-infinite-scroll *ngIf="tagData.data.submit && tagData.pageTotal &&  (pageNo < pageTotal) " threshold="5%" (ionInfinite)="loadMoreData($event)">
  <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>